<template>
	<view class="container">
		<view class="subscribe">
			<text class="title">签到码</text>
			<input v-model="checkInCode" placeholder="请输入4位签到码" name="text" class="input">
			<button @click="submit"> 确定</button>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted
	} from 'vue'
	import{submitSignCodeRe} from "@/request/signCodeRe.js"
	const info = ref({})
	const checkInCode=ref("")
	
	onMounted(() => {
		const eventChannel = getCurrentInstance().proxy.getOpenerEventChannel()
		eventChannel.on('acceptDataFromOpenerPage', (data) => {
			info.value = data
		})
	})
	
	const submit=async function(){
		await submitSignCodeRe(info.value,checkInCode.value).then(res=>{
			console.log(res);
			if(res.data.code==200){
				uni.showToast({
					title:"签到成功",
					duration:1500,
					icon:"success"
				})
				uni.navigateBack()
			}else{
				uni.showToast({
					title:"签到码错误",
					duration:1500,
					icon:"error"
				})
			}
		}).catch(err=>{
			uni.showToast({
				title:"服务器出错",
				duration:1500,
				icon:"error"
			})
			
		})
		
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30px;
		.title{
			font-size: 20px;
			font-weight: bold;
		}
		.subscribe {
			display: flex; /* 让内容竖直排列 */
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		
			height: 180px; /* 稍微加高，避免内容拥挤 */
			width: 240px;
			padding: 20px;
			background-color: #FFF;
			border-radius: 4px;
			color: #333;
			box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
		}

		.input {
			// position: absolute;
			/* 添加这行 */
			bottom: 40px;
			/* 距离底部的距离，调整以不遮挡按钮 */
			left: 20px;
			/* 保持左右边距一致 */
			right: 20px;
			--input-focus: #2d8cf0;
			--font-color: #323232;
			--font-color-sub: #666;
			--bg-color: #fff;
			--main-color: #323232;
			width: 200px;
			height: 40px;
			border-radius: 5px;

			border: 2px solid var(--main-color);
			background-color: var(--bg-color);
			box-shadow: 4px 4px var(--main-color);
			font-size: 15px;
			font-weight: 600;
			color: var(--font-color);
			padding: 5px 10px;
			outline: none;
		}

		.input::placeholder {
			color: var(--font-color-sub);
			opacity: 0.8;
		}

		.input:focus {
			border: 2px solid var(--input-focus);
		}

		button {
		 appearance: button;
		 background-color: #1899D6;
		 border: solid transparent;
		 border-radius: 16px;
		 border-width: 0 0 4px;
		 box-sizing: border-box;
		 color: #FFFFFF;
		 cursor: pointer;
		 display: inline-block;
		 font-size: 15px;
		 font-weight: 700;
		 letter-spacing: .8px;
		 line-height: 20px;
		 margin: 0;
		 outline: none;
		 overflow: visible;
		 padding: 13px 19px;
		 text-align: center;
		 text-transform: uppercase;
		 touch-action: manipulation;
		 transform: translateZ(0);
		 transition: filter .2s;
		 user-select: none;
		 -webkit-user-select: none;
		 vertical-align: middle;
		 white-space: nowrap;
		}
		button {
			width: 70%; /* 让按钮和输入框宽度对齐 */
			padding: 12px 0;
			margin-top: 10px;
			font-size: 14px;
			border-radius: 6px;
		}
		button:after {
		 background-clip: padding-box;
		 background-color: #1CB0F6;
		 border: solid transparent;
		 border-radius: 16px;
		 border-width: 0 0 4px;
		 bottom: -4px;
		 content: "";
		 left: 0;
		 position: absolute;
		 right: 0;
		 top: 0;
		 z-index: -1;
		}
		
		button:main, button:focus {
		 user-select: auto;
		}
		
		button:hover:not(:disabled) {
		 filter: brightness(1.1);
		}
		
		button:disabled {
		 cursor: auto;
		}
		
		button:active:after {
		 border-width: 0 0 0px;
		}
		
		button:active {
		 padding-bottom: 10px;
		}
		
	}
</style>